<template>
  <div style="min-height: 300px">
    <a-form ref="typeForm" :model="entity" :rules="rules" label-width="120px">
      <a-form-item label="意见分类" field="title">
        <a-input v-model="entity.title" @keyup.enter.native="btnSubmit" ref="title" placeholder="意见分类" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="btnSubmit">确 定</a-button>
          <a-button type="primary" @click="onCancel">取 消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { Message } from '@arco-design/web-vue'
import mittBus from "@/utils/route-listener"
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";

const typeForm = ref(null)
const title = ref(null)
const emit = defineEmits(['update:modelValue'])
let props = defineProps({
  modelValue : {type : Boolean, default: true},
  entityId : {type : Number, default: 0}
})

let entity = ref({
  id : props.entityId,
  title: '',
  deleted: '0',
  cdefine1: '',
  cdefine2: '',
})
const rules = reactive({
  title: [
    { required: true, message: '请输入意见分类名称', trigger: 'blur' },
    { minLength: 2, maxLength: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ]
})
const loadEntity = ()=>{
  if(props.entityId > 0){
    axios.post( '/yijian/getyijiantype',{id : props.entityId} ).then( res =>{
      entity.value = res.data
    })
  }
}
const onCancel = ()=>{
  emit('update:modelValue', false) //关闭弹窗
}

const btnSubmit = ()=>{
  if(!typeForm.value) return;
  typeForm.value.validate().then((errors) =>{
    if(!errors){
      axios.post('/yijian/addedityijiantype', entity.value).then( (res) =>{
        const {code,msg, data} = res;
        if(code != '200'){
          Message.error(msg);
        }else{
          Message.success(msg)
          emit('update:modelValue', false) //关闭弹窗
          props.entityId > 0 ? mittBus.emit('typeedit', {}) : mittBus.emit('typeadd', {}); //触发事件总线，让列表界面更新数据
        }
      })
    }else{
      console.log('error submit!!');
      return false;
    }
  })
}
onMounted(()=>{
  loadEntity()
  nextTick(()=>{
    title.value.focus();
  })
})
</script>

<style scoped>

</style>
